<template>
    <view class="content">
        <view class="bg"></view>
        
        <view class="box">
			<view class="item">
			    <view class="grey">运输线路</view>
			    <view class="item-right">{{data.line}}</view>
			</view>
            <view class="item">
                <view class="grey">始发地</view>
                <view class="item-right">{{data.origin}}</view>
            </view>
            <view class="item">
                <view class="grey">目的地</view>
                <view class="item-right">{{data.destination}}</view>
            </view>
            <view class="item">
                <view class="grey">装车地点</view>
                <view class="item-right">{{data.loading_site}}</view>
            </view>
            <view class="item" v-if="data.vehicle">
                <view class="grey">车辆类型</view>
                <view class="item-right">{{data.vehicle}}</view>
            </view>
            <view class="item" v-if="data.length">
                <view class="grey">车长要求</view>
                <view class="item-right">{{data.length}}</view>
            </view>
            <view class="item" v-if="data.load">
                <view class="grey">载重要求</view>
                <view class="item-right">{{data.load}}</view>
            </view>
            <view class="item" v-if="data.costs">
                <view class="grey">租赁费用</view>
                <view class="item-right">{{data.costs}}元</view>
            </view>
            <view class="item" v-if="data.load_start_time">
                <view class="grey">装车开始时间</view>
                <view class="item-right">{{data.load_start_time}}</view>
            </view>
            <view class="item" v-if="data.load_end_time">
                <view class="grey">装车结束时间</view>
                <view class="item-right">{{data.load_end_time}}</view>
            </view>
            <view class="item" v-if="data.expect_time">
                <view class="grey">预计到达时间</view>
                <view class="item-right">{{data.expect_time}}</view>
            </view>
            <!-- 已完成 -->
            <view class="item" v-if="data.arrival_time">
                <view class="grey">司机到达时间</view>
                <view class="item-right">{{data.arrival_time}}</view>
            </view>
        </view>
         
        <view class="box" v-if="!data.weigh && (type == 3 || type == 4)">
            <view class="work-title">过磅单据</view>
            <view class="item">
                <view class="grey">过磅吨数</view>
                <view class="item-right2">
                    <input type="digit" v-model="weight" placeholder="请输入吨数" class="inp">
                    <text class="u-p-l-10 text-bold">吨</text>
                </view>
            </view>
            <view class="grey u-p-t-20 u-p-b-20">过磅单据上传</view>
			<view class="img-box">
			    <view class="u-rela" v-if="imgUrl">
			        <image :src="imgUrl" class="up-icon" @click="$previewImageSA(imgUrl)"></image>
			        <view class="del-img" @click.stop="delImage">删除</view>
			    </view>
			    <image src="/static/image/up.png" class="up-icon" v-else @click="chooseImage"></image>
			</view>
			
			<view class="item" v-if="data.cost_doc && data.cost_doc.length > 0">
			    <view class="grey">费用单据上传</view>
			    <view class="item-right">
					<view v-for="(el,ind) in data.cost_doc" :key="ind">
						{{el.items}} {{el.cost}}元 {{el.num + el.unit}}
					</view>
				</view>
			</view>
			<view class="item-img" v-if="data.cost_doc_image && data.cost_doc_image.length > 0">
			    <image v-for="(el,index) in data.cost_doc_image" :key="index" :src="el.image" 
					class="img u-m-b-15 u-m-l-15" @click="$previewImage(data.cost_doc_image, index)"></image>
			</view>
        </view>
        
        <!-- 已完成 -->
        <view class="box" v-if="data.weigh">
            <view class="item">
                <view class="grey">过磅吨数</view>
                <view class="item-right">{{data.weigh}}吨</view>
            </view>
            <view class="item">
                <view class="grey">过磅单据上传</view>
                <image :src="data.weigh_img" class="img" @click="$previewImageSA(data.weigh_img)"></image>
            </view>
            <view class="item" v-if="data.cost_doc && data.cost_doc.length > 0">
                <view class="grey">费用单据上传</view>
                <view class="item-right">
            		<view v-for="(el,ind) in data.cost_doc" :key="ind">
            			{{el.items}} {{el.cost}}元 {{el.num + el.unit}}
            		</view>
            	</view>
            </view>
            <view class="item-img" v-if="data.cost_doc_image && data.cost_doc_image.length > 0">
                <image v-for="(el,index) in data.cost_doc_image" :key="index" :src="el.image" 
            		class="img u-m-b-15 u-m-l-15" @click="$previewImage(data.cost_doc_image, index)"></image>
            </view>
        </view>
        
        <view class="btn" v-if="!data.weigh && (type == 3 || type == 4)" @click="$noMultipleClicks(doSubmit)">提交</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				noClick:true,//连点
                id: '',
				data: {},
				weight: '',
				imgUrl: '',
				imgId: '',
				type: '',
            };
        },
        onLoad(option) {
			this.type = option.type
			this.id = option.id
			this.getData()
        },
        methods: {
			delImage() {
				uni.showModal({
				    title: '温馨提示',
				    content: '确定要删除照片吗？',
				    success: res => {
				        if (res.confirm) {
							this.imgUrl = ''
							this.imgId = ''
				        } else if (res.cancel) {
				            
				        }
				    }
				});
			},
			
			doSubmit() {
				// if (!this.weight) {
				// 	this.$toast('请输入过磅吨数')
				// 	return
				// }
				// if (!this.imgId) {
				// 	this.$toast('请上传过磅单据')
				// 	return
				// }
				this.$ajax('submit_weigh', {
					user_token: this.$getSync('userToken'),
					order_id: this.id,//运单id
					weigh: this.weight,//高速过磅
					weigh_id: this.imgId,//过磅单据id
				}).then(ret => {
					if (ret.success == 1000) {
						this.$toast('提交成功')
						setTimeout(() => {
							this.$backT()
						}, 500)
					} else {
						this.$toast(ret.msg);
					}
				});
			},
			
			chooseImage() {
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album', 'camera'], // 相机拍照 album 相册、camera 拍照
				    success: (res) => {
				        this.$upLoadPic(res.tempFilePaths[0]).then(ret => {
				            console.log(ret)
							let data = ret.detail
							this.imgId = data.image_id
							this.imgUrl = data.image
				        });
				    }
				});
			},
			
            getData() {
				this.$ajax('driver_waybill_detail', {
					user_token: this.$getSync('userToken'),
					order_id: this.id,//运单id
				}).then(ret => {
					if (ret.success == 1000) {
						this.data = ret.detail
					} else {
						this.$toast(ret.msg);
					}
				});
			},
        }
    };
</script>

<style lang="scss">
	.img-box{
	    margin-top: 10rpx;
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: flex-start;
	    align-items: center;
	}
	.del-img{
	    position: absolute;
	    right: 0;
	    bottom: 0;
	    color: #FFFFFF;
	    font-size: 22rpx;
	    padding: 7rpx 12rpx;
	    background-color: #000000;
	    opacity: .7;
	    border-radius: 5rpx;
	}
    .img{
        width: 289rpx;
        height: 204rpx;
    }
	
	
    
    page{
        background-color: #f2f4fa;
    }
    .content {
    	padding: 30rpx 20rpx 90px;
    }
    .bg {
    	width: 100%;
    	height: 600rpx;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: -1;
        background: linear-gradient(to bottom, #004580,#18568c, #f2f4fa);
    }
    .title{
        padding: 10rpx 0 40rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 36rpx;
        color: #fff;
    }
    .top-icon{
        width: 69rpx;
        height: 69rpx;
        margin-right: 20rpx;
    }
    .dest{
        font-weight: bold;
    }
    
    .box{
        padding: 20rpx 30rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 16rpx;
    }
    .route{
        padding: 10rpx 0 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .line{
        width: 31rpx;
        height: 162rpx;
        margin-right: 15rpx;
    }
    .route-r{
        flex: 1;
        font-size: 34rpx;
        font-weight: bold;
    }
    .address{
        font-size: 28rpx;
        color: #999999;
        font-weight: normal;
    }
    
    .work-title{
        font-size: 32rpx;
        font-weight: bold;
        padding-top: 10rpx;
        padding-bottom: 15rpx;
    }
    .item{
        padding: 15rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
	.item-img{
		padding-top: 15rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
	}
    .item-right{
        flex: 1;
        text-align: right;
        font-weight: bold;
        padding-left: 30rpx;
    }
    .text{
        word-break: break-all;
        white-space: pre-line;
        padding-top: 5rpx;
    }
    .grey{
        color: #656565;
    }
    .list-title{
        font-size: 34rpx;
        color: #fff;
        background: linear-gradient(to right, #7fb1e4, #c7e1f9);
        border-radius: 20rpx;
        padding: 15rpx 30rpx;
        height: 120rpx;
        margin-bottom: -40rpx;
    }
    .price{
        padding: 25rpx 0 10rpx;
        border-top: 2rpx solid #f4f4f4;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        font-size: 28rpx;
    }
    .price-num{
        font-size: 40rpx;
        font-weight: bold;
        padding-left: 10rpx;
        padding-right: 5rpx;
    }
    
    .pt-box{
        padding: 35rpx 30rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 16rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .icon-02{
        width: 55rpx;
        height: 55rpx;
        margin-right: 15rpx;
    }
    .pt-t1{
        font-size: 32rpx;
        font-weight: bold;
        padding-right: 20rpx;
    }
    .pt-t2{
        font-size: 22rpx;
        color: #929292;
    }
    .pt-t3{
        font-size: 22rpx;
        color: #ff5f2b;
    }
    
    .l-icon{
        width: 30rpx;
        height: 30rpx;
        background-color: #ff4926;
        border-radius: 10rpx;
        font-size: 20rpx;
        color: #fff;
        text-align: center;
        line-height: 30rpx;
        margin-right: 10rpx;
    }
    .item-right2{
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-left: 15rpx;
    }
    .inp{
        flex: 1;
        text-align: right;
    }
    .tip{
        color: #fe6a00;
        font-weight: normal;
    }
    
    .up-icon{
        width: 187rpx;
        height: 187rpx;
    }
    
    .btn{
        font-size: 34rpx;
        color: #fff;
        text-align: center;
        padding: 25rpx;
        background-color: #00457f;
        border-radius: 50rpx;
        margin-top: 50rpx;
    }

</style>
